import React, { Component } from 'react'
import './index.css'
export default class Footer extends Component {
  //全选回调
  handleCheckAll=(event)=>{
    this.props.checkAllTodo(event.target.checked)
  }  
  //清除已完成任务的回调
  handleClearAllDone = (params) => {
    this.props.clearAllDone()
  }
  render() {
    const { todos } = this.props
    //统计数组中已完成的数量
    const doneCount = todos.reduce((pre,todo) => pre + (todo.done?1:0) ,0)
    const total = todos.length

        return (
            <div className="todo-footer">
              <label>
                {/* bug1:defaultChecked只在页面第一次加载时生效一次，无法实现动态更新 */}
                {/* bug2:doneCount === total只写这个判断条件会导致总数都为0时也会选中 */}
                <input type="checkbox"
                onChange = {this.handleCheckAll}
                  checked={doneCount === total&&total?true:false}
                />
              </label>
              <span>
                <span>已完成{doneCount}</span> / 全部{total}
              </span>
              <button className="btn btn-danger" onClick={this.handleClearAllDone}>清除已完成任务</button>
            </div>
          
        )
    }
}
